<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
  <head>
	<jsp:include page="../common/easyui.jsp"></jsp:include>
	<script type="text/javascript" charset="UTF-8">
		var south;
		var tabs;
		var mainTab;
		$(function(){
			south = $("#layout").layout("panel","south");
			tabs = $("#tabs").tabs();
		});
	
		function add(){
			south.panel("maximize");
			setTimeout(southRestore,3000);
		}

		function southRestore(){
			south.panel("restore");
		}
	</script>
  </head>
  
  <body id="layout" class="easyui-layout" data-options="fit:true">
     <div data-options="region:'center',split:true" style="padding:5px;background:#eee;">
     	<table class="easyui-datagrid"
            data-options="rownumbers:true,singleSelect:true,fit : true,url:'datagrid_data1.json',method:'get',toolbar:'#tb'">
	        <thead>
	            <tr>
	                <th data-options="field:'itemid',width:80">Item ID</th>
	                <th data-options="field:'productid',width:100">Product</th>
	                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
	                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
	                <th data-options="field:'attr1',width:240">Attribute</th>
	                <th data-options="field:'status',width:60,align:'center'">Status</th>
	            </tr>
	        </thead>
	    </table>
	    <div id="tb" style="padding:5px;height:auto">
	        <div style="margin-bottom:5px">
	            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add()">添加</a>
	            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
	            <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
	            <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
	            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
				<span style='widht:10px'></span>	        
	            Date From: <input class="easyui-datebox" style="width:80px">
	            To: <input class="easyui-datebox" style="width:80px">
	            Language: 
	            <select class="easyui-combobox" panelHeight="auto" style="width:100px">
	                <option value="java">Java</option>
	                <option value="c">C</option>
	                <option value="basic">Basic</option>
	                <option value="perl">Perl</option>
	                <option value="python">Python</option>
	            </select>
	            <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
	        </div>
	    </div>
     </div>
     <div data-options="region:'south',split:true" style="height:250px;overflow: hidden;">
     	<div id="tabs" class="easyui-tabs" data-options="fit:true">
		    <div title="Tab1" style="">
		    	<div id="panel" toolbar="#toolbar" fit="true">
					<div id="toolbar" class="datagrid-toolbar">
					   <a href="javascript:void(0)" class="easyui-linkbutton" id="btnSave" iconCls="icon-save" plain="true">保存</a>
					   <div class="datagrid-btn-separator"></div>
					   <a href="javascript:void(0)" class="easyui-linkbutton" id="btnCancel" iconCls="icon-cancel" plain="true">取消</a>
					</div>
					<form id="userForm" method="post">
						<table class="tableForm">
							<tr>
								<th>用户ID</th>
								<td><input name="id" readonly="readonly" /></td>
							</tr>
							<tr>
								<th>登录名称</th>
								<td><input name="name" class="easyui-validatebox" required="true" /></td>
							</tr>
							<tr title="如果不更改密码,请留空!">
								<th>登录密码</th>
								<td><input name="password" type="password" /></td>
							</tr>
							<tr>
								<th>创建时间</th>
								<td><input name="createdatetime" class="easyui-datetimebox" style="width: 156px;" /></td>
							</tr>
							<tr>
								<th>最后修改时间</th>
								<td><input name="modifydatetime" class="easyui-datetimebox" style="width: 156px;" /></td>
							</tr>
							<tr>
								<th>所属角色</th>
								<td><select name="roleId" style="width: 156px;"></select></td>
							</tr>
						</table>
					</form>
				</div>
		    </div>
		    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">
		        tab2
		    </div>
		    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">
		        tab3
		    </div>
		</div>
     </div>
  </body>
</html>
